/**
 * @Description:
 * @Author: CHEHSHUANG
 * @Date: 2019/3/15
 */
import React, {Component} from 'react';
import {Input} from "antd";
import RangeDatePicker from "../../../commons/components/RangeDatePicker";
import Divider from "antd/es/divider";
import moment from "moment";

class MyOrderTbar extends Component {
  state = {
    quickValue: "",
    orderType: "ended",
    flowDate: {startDate: moment().month(moment().month() - 1), endDate: moment()}
  }
  refreshData = () => {
    const {handleSearchValue} = this.props;
    const {quickValue, flowDate, orderType} = this.state;
    let newFlowDate = {
      "Q_EQ_ended_Boolean": orderType === "ended",
      "Q_GE_startDate_Date": flowDate.startDate,
      "Q_LE_endDate_Date": flowDate.endDate
    }
    handleSearchValue && handleSearchValue({quickValue, ...newFlowDate});
  }

  handleSearch = (quickValue) => {
    this.setState({quickValue}, () => this.refreshData());
  }

  dateChange = (flowDate) => {
    this.setState({flowDate}, () => this.refreshData());
  }
  setOrderType = (orderType) => {
    this.setState({orderType}, () => this.refreshData())
  }
  render() {
    const {visible = false} = this.props;
    const {orderType, flowDate} = this.state;
    return (
      visible && <div className={"tbar-right"} style={{width: 640}}>
        <div style={{display: "flex", alignItems: "center", marginRight: 16}}>
          <div
            className={`order-type ${orderType === "inFlow" ? "selected" : ""}`}
            onClick={() => {
              this.setOrderType("inFlow")
            }}
          >流程中
          </div>
          <Divider type="vertical"/>
          <div
            className={`order-type ${orderType !== "inFlow" ? "selected" : ""}`}
            onClick={() => {
              this.setOrderType("ended")
            }}
          >已完成
          </div>
        </div>
        <RangeDatePicker
          style={{width: 300}}
          value={flowDate}
          type="currentTime"
          splitStr="到"
          onChange={this.dateChange}
        />
        <Input.Search
          style={{width: 200, marginLeft: 8}}
          allowClear
          placeholder={"输入关键字查询"}
          onSearch={this.handleSearch}
        />
      </div>
    );
  }
}

export default MyOrderTbar;
